<html>
<head>

<style type="text/css">

body {
	margin: 0px;
	overflow: hidden;
	background-color: #e0e0e0;
}

div#x {
	position: absolute;
	width:    480px;
	height:   320px;
	left:    -240px;
	top:     -160px;
	margin:   50%;
}

div.button {
	border: 2px solid black;
	-webkit-border-radius: 10px;

	font-size:   20px;
	font-family: Sans-Serif;
	text-align:  center;
	line-height: 36px;
}
div.button:hover {
	border-color: white;
}

div#actions {
	position: absolute;
	margin: 50%;
}
div#actions img {
	position: absolute;
	margin: -20px;
}

div#head {
	position:         absolute;
	background-color: #c0c0c0;
	overflow:         hidden;
	width:            480px;

	-web kit-border-radius: 20px;
	-web kit-border-top-left-radius:     20px;
	-web kit-border-top-right-radius:    20px;
	-webkit-border-bottom-left-radius:  40px;
	-webkit-border-bottom-right-radius: 40px;

	font-size:     30px;
	font-family:   Sans-Serif;
	line-height:   38px;
	text-align:    center;
	text-overflow: ellipsis;
	white-space:   nowrap;

	border-style: solid;
	border-color: black;
	border-width: 0px 2px 2px 2px;
}
div#head img:first-child {
	float: left;
}
div#head img:last-child {
	float: right;
}

div#foot {
	position: absolute;
	width:    480px;
	bottom:   0px;

	font-size:   30px;
	font-family: Sans-Serif;
	line-height: 40px;
	text-align:  center;
}
div#foot div:first-child {
	fl oat: left;
}
div#foot div:last-child {
	fl oat: right;
}
div#foot span {
	text-overflow: ellipsis;
	white-space:   nowrap;
}

div#map {
	position: absolute;
	background-color: lightblue;
	border: 1px blue solid;

	margin: 50%;
}

div.planet {
	position: absolute;
	background-color: pink;
}
div.planet div {
	position: absolute;
	width: 80px;
	font-size:     20px;
	font-family:   Sans-Serif;
	line-height:   80px;
	text-align:    center;
	margin: -40px;
}
div.planet img {
	position: absolute;
	width: 80px;
	margin: -40px;
}

div#message {
	position: absolute;
	width: 400px;
	height: 240px;
	padding: 20px;
	margin: 20px;

	background-color: lightgrey;
	border: 2px solid black;
	-webkit-border-radius: 20px;
}

</style>
<script type="text/javascript">
</script>
</head>
<body>

<div id="x">
<div id="actions">
<img src="gfx/b48.png" alt="-" style="top:-100px; left:-220px;" />
<img src="gfx/b47.png" alt="+" style="top:-100px; left: 220px;" />
</div>

<div id="head">
<!--img src="gfx/b40.png" alt="" /-->
<span>Galaxy View</span>
<!--img src="gfx/b40.png" alt="" /-->
</div>

<div id="foot">
<img src="gfx/b40.png" alt="" style="float: left;" />
<img src="gfx/b40.png" alt="" style="float: right;" />
<div style="float: left; margin: 0px 10px;">80</div>
<div style="float: right; margin: 0px 10px;">END</div>
<!--span>Starship Sleeper 1 23 456 7890 12345</span-->
</div>

<div id="message">
Welcome to a new game of Space Crack!
<p>
<div class="button">OK</div>
</div>
</div>

</body>
</html>
